*{
	margin: 0px;
	padding: 0px;
}
body{
	background-image: url(1.jpg);
    background-position: center;
	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%,100%;

}
button.a{
	background-color: pink;
	height: 100px;
	width: 100px;
	font-size: 25px;
	border-radius: 50%;
	transition: all 5s;
	animation: myframsa 5s;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
	animation-delay:1s;
	opacity: 0;
	
}
button.b{
	background-color: pink;
	height: 100px;
	width: 100px;
	font-size: 25px;
	border-radius: 50%;
	position: absolute;
	left: 92%;
	top: 10px;
	transition: all 5s;
	animation: myframsb 5s;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
	animation-delay:1s;
    opacity: 0;

}
button.c{
	background-color: pink;
	height: 100px;
	width: 100px;
	font-size: 25px;
	border-radius: 50%;
	position: absolute;
	top: 83%;
	transition: all 5s;
	animation: myframsc 5s;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
	animation-delay:1s;
	opacity: 0;
}
button.d{
	background-color: pink;
	height: 100px;
	width: 100px;
	font-size: 25px;
	border-radius: 50%;
	position: absolute;
	left: 92%;
	top: 83%;
	transition: all 5s;
	animation: myframsd 5s;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
	animation-delay:1s;
	opacity: 0;
}
@keyframes myframsa{
	
	25%{
		opacity: 1;
		color: #fff;
		transform: translate(1250px,0)
	}
	50%{
		opacity: 1;
		color: #fff;
		transform: translate(1250px,520px)
	}
	75%{
		opacity: 1;
		color: #fff;
		transform: translate(0,520px)
	}
	100%{
		opacity: 1;
		color: #fff;
		transform: translate(625px,260px)
	}
}
@keyframes myframsb{
	
	25%{
		opacity: 1;
		color: #fff;
		transform: translate(0,520px)
	}
	50%{
		opacity: 1;
		color: #fff;
		transform: translate(-1250px,520px)
	}
	75%{
		opacity: 1;
		color: #fff;
		transform: translate(-1250px,0)
	}
	100%{
		opacity: 1;
		color: #fff;
		transform: translate(-625px,260px)
	}
}
@keyframes myframsc{
	
	
	25%{
		opacity: 1;
		color: #fff;
		transform: translate(0,-520px)
	}
	50%{
		opacity: 1;
		color: #fff;
		transform: translate(1250px,-520px)
	}
	75%{
		opacity: 1;
		color: #fff;
		transform: translate(1250px,0)
	}
	100%{
		opacity: 1;
		color: #fff;
		transform: translate(625px,-260px)
	}
}
@keyframes myframsd{
	
	
	25%{
		opacity: 1;
		color: #fff;
		transform: translate(-1250px,0)
	}
	50%{
		opacity: 1;
		color: #fff;
		transform: translate(-1250px,-520px)
	}
	75%{
		opacity: 1;
		color: #fff;
		transform: translate(0,-520px)
	}
	100%{
		opacity: 1;
		color: #fff;
		transform: translate(-625px,-260px)
	}

}

